<template>
    <div class="photoinfo">
        <h3>{{ photoinfo.title }}</h3>
        <p class="subtitle">
            <span>发表时间:{{photoinfo.add_time | dataFormat}}</span>
            <span>点击:{{photoinfo.click}}次</span>
        </p>
        <hr>

        <!-- 缩略图 -->
        <div class="thumbs">
         <vue-preview :slides="slide1"></vue-preview>

        </div>

        <!-- 图片内容 -->
        <div class="content" v-html="photoinfo.content"></div>

        <!-- 放置现成评论子组件 -->
        <comment :id="id"></comment>

    </div>
</template>

<script>
import comment from "../subcomponent/comment"
    export default {
        components:{
            comment,
        },
        data(){
            return{
                id: this.$route.params.id,
                photoinfo:{},
                slide1:[]
            }
        },
        created(){
            this.getPhotoinfo();
            this.getThumbs();
        },
        methods:{
            getPhotoinfo(){
                // 获取图片
                this.$http.get('api/getimageInfo/'+ this.id ).then(res=>{
                    if(res.body.status === 0 ){
                        this.photoinfo = res.body.message[0]
                    }
                })
            },
            getThumbs(){
                this.$http.get('api/getthumimages/' + this.id).then(res=>{
                    if(res.body.status === 0 ){
                        res.body.message.forEach(item => {
                            item.w = 600,
                            item.h = 400,
                            item.msrc = item.src
                        });
                        this.slide1 = res.body.message;
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
.photoinfo{
    padding: 3px;
    h3{
        color: #26a2ff;
        font-size: 15px;
        text-align: center;
        margin: 15px 0;
    }
    .subtitle{
        display: flex;
        justify-content: space-between;
    }
    .content{
        font-size: 13px;
        line-height: 30px;
    }
}
</style>

<style>
.thumbs{
    display: flex;
    flex-wrap: wrap;
}
.my-gallery{
    height: 100%;   
}
 figure{
 width: 100px;
 height: 100px;
 margin: 5px 12px;
 float: left;
}
figure img{
    width: 100%;
    height: 100%;
} 
</style>